<template>
  <el-dialog v-model="dialogVisibleLocal" :style="{ borderRadius: '10px', padding: '0' }" :show-close="false"
    :show-header="false" class="practice-dialog" width="45%">
    <div class="practice-container flex">
      <div class="identity">
        <div class="dialogTitle">考生身份确认</div>
        <div class="flex">
          <div class="examGuide">
            <div class="examTitle">考生须知</div>
            <div v-for="(item, index) in guideList" :key="index" class="guideItem">
              {{ item.content }}
            </div>
          </div>
          <div class="marL40" style="width: 65%;">
            <div class="flex flex-align-center">
              <img :src="userStore.storeInfo.avatar" alt="" class="headerPic" />
              <div class="marL20">
                <div class="phone">{{ userStore.storeInfo.memberName }}</div>
                <div class="marT20 fc25">复习别偷懒，题要多练才能熟</div>
              </div>
            </div>
            <div class="marT30">
              <span class="learn_title">考试科目</span>
              <span class="marL30 fh28">
                {{ categoryNameMap[configData?.categoryId] || '' }}
              </span>
            </div>
            <div class="marT30">
              <span class="learn_title">准驾车型</span>
              <span class="marL30 fh28">小车C1/C2/C3</span>
            </div>
            <div class="marT30">
              <span class="learn_title">考试标准</span>
              <span class="marL30 fh28">
                {{ configData?.totalQuestions }}题，{{ userStore.categoryId === 6 ? '30' :
                  '45'
                }}分钟
              </span>
            </div>
            <div class="marT30">
              <span class="learn_title">合格标准</span>
              <span class="marL30 fh28">{{ configData?.passingScore }}分及格（满分100分）</span>
            </div>
            <div class="marT30">
              <span class="learn_title">出题规则</span>
              <span class="marL30 fh28">根据公安部规定出题规则组卷</span>
            </div>
            <div class="warmTips marT30">
              温馨提示:模拟考试下不能修改答案，每做错1 题扣{{ 100 / configData?.totalQuestions }}分，合格标准为90分。
            </div>
          </div>
        </div>
        <div class="flex flex-justify-center marT30">
          <div class="continue" @click="toExam">开始考试</div>
        </div>
      </div>
      <!-- <div class="rightBox flex flex-column flex-align-center">
        <div class="downTitle">下载绿通驾考APP</div>
        <div class="gettips">获取手机版专享特权</div>
        <img src="@/assets/img/ewm1.png" alt="" class="ewmPic" />
        <div class="fh25 marT20">绿通驾考APP</div>
        <div class="unit marT5">支持平台：Android、iOS</div>
        <img src="@/assets/img/ewm2.png" alt="" class="ewmPic" />
        <div class="fh25">微信小程序</div>
        <div class="unit marT5">直接体验，无需下载</div>
      </div> -->
    </div>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref, watch, reactive } from 'vue'
import '../home.scss'
import { useUserStore } from '@/store/user'
import { useRouter } from 'vue-router'
const router = useRouter()

const userStore = useUserStore()
const props = defineProps<{
  statisticsData: {
    type: Object
    default: () => {}
  }
  configData: {
    type: Object,
    default: () => {}
  }
  dialogVisible: boolean
}>()

const configData = ref<any>(props.configData)
const statisticsData = ref<any>(props.statisticsData)
const categoryNameMap = ref<any>({
  1: '科目一',
  4: '科目四',
  5: '满分学习',
  6: '注销重考',
})

const emit = defineEmits(['update:dialogVisible'])
const toExam = () => {
  router.push({
    name: 'mnExam',
  })
}
const dialogVisibleLocal = ref(props.dialogVisible)
watch(
  () => props.dialogVisible,
  (val) => (dialogVisibleLocal.value = val),
)
watch(dialogVisibleLocal, (val) => emit('update:dialogVisible', val))

const guideList = reactive([
  {
    content: '1.遵守考场纪律，服从监考员指挥。',
  },
  {
    content: '2.进入考场，手机关机，禁止抽烟和吃零食。',
  },
  {
    content: '3.未经工作人员允许，考试禁止随意出入考场。',
  },
  {
    content: '4.考场内禁止大声喧哗，禁止随意走动。',
  },
  {
    content: '5.考试中认真答题，不准交头接耳。',
  },
  {
    content: '6.考试中不准冒名顶替，不准弄虚作假。',
  },
  {
    content: '7.注意考场卫生，禁止随地吐痰，禁止乱扔纸屑。',
  },
  {
    content: '8.爱护公物及考试设备。',
  },
])
</script>
<style lang="scss" scoped>
@use './simulate.scss';
</style>
